<template>
  <div
    class="bg-base-200/10 border-b w-full max-h-full overflow-x-auto overflow-y-hidden"
  >
    <div
      role="tablist"
      class="tabs tabs-bordered max-h-full h-full box-border pt-2"
    >
      <a
        role="tab"
        class="tab whitespace-nowrap"
        :class="{ 'tab-active': index === activeIndex }"
        v-for="(name, index) in tabs"
        v-bind:key="index"
        @click="changeTab(index)"
      >
        {{ name }}
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: "SimpleTab",
  data() {
    return {
      activeIndex: 0,
    };
  },
  computed: {
    activeTab() {
      return this.tabs[this.activeIndex];
    }
  },

  props: {
    tabs: {
      type: Array,
      required: true,
      default: () => [],
    }
  },
  methods: {
    changeTab(index) {
      this.activeIndex = index;
      this.$emit("update:modelValue", this.activeIndex);
      this.$emit("change", {
        activeIndex: this.activeIndex,
        activeTab: this.activeTab,
      });
    },
  },
};
</script>
